<template>
	<div class="cs-container">
		<div class="cs-title clear">
			<div class="left">vue 性能优化</div>
			<div class="right"></div>
		</div>
		<div class="cs-content cs-table" v-infinite-scroll="load" style="overflow:auto">
			<ol style="font-size: 16px;line-height: 1.8">
				<li>路由使用懒加载模式加载组件</li>
				<li>图片懒加载</li>
				<li>如果使用了组件库(vant/element-ui/iview)，按需加载，不要全局引用</li>
				<li>第三方库使用CDN方式引入</li>
				<li>webpack打包优化</li>
				<ul>
					<li>打包去除Map文件</li>
					<li>开启gZip压缩（ compression-webpack-plugin ）</li>
					<li>压缩JS文件( uglifyjs-webpack-plugin )</li>
					<li>压缩IMG文件</li>
				</ul>
			</ol>
			<el-row :gutter="20">
				<el-col :span="6" v-for="(item, index) in images" :key="index">
					<div class="grid-content">
						<img v-lazy="item" alt="">
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ui',	
		data() {
			return {
				images: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://www.zhangcs.cn/api/js/720/image/720_01.jpg',
					'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jp eg'
        ],
				loaded: false
			}
		},
		mounted() {
			
		},
		methods: {
			load() {
				let time = this.loaded ? 1500 : 0;
				setTimeout(() => {
					this.images.push('https://picsum.photos/200/200?time=' + new Date().getTime());
					this.images.push('https://picsum.photos/201/201?time=' + new Date().getTime());
					this.images.push('https://picsum.photos/202/202?time=' + new Date().getTime());
					this.images.push('https://picsum.photos/203/203?time=' + new Date().getTime());
					this.loaded = true;
				}, time);
			}
		}
	}
</script>

<style scoped lang="less">
	.grid-content {
		width: 100%;
		height: 200px;
		margin-bottom: 20px;
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>